<template>
	<view class="root" :style="{ paddingBottom: `${shoppingCartBottom + 70}px` }">
		<image
			:style="{ width: `710rpx`, height: `470rpx`, margin: `20rpx` }"
			class="bgc-fff br-20"
			:src="commodityInfo.cover_image"
			mode="aspectFill"
		/>

		<view class="br-20 mt-26 ml-20 mr-20 oh">
			<text class="bgc-ffd6d7 color-fe0b0b fs-24 lh-3 text-center">
				温馨提示：在线下单前请务必电话联系商家，是否能及时配送！
			</text>
			<view class="bgc-fff" :style="{ padding: `36rpx 28rpx` }">
				<view class="fd-row">
					<text class="f1 color-333 fs-32 fw-600 lh-50">
						{{ commodityInfo.name || "--" }}
					</text>
					<view
						@click="openPoster"
						class="fd-row ai-center height-50 ml-12"
						hover-class="tap-hover"
						hover-stay-time="90"
					>
						<image
							class="width-24 height-24"
							src="/static/img/icon-share.png"
							mode="aspectFit"
						/>
						<text class="ml-12 color-f45455 fs-24">分享海报</text>
					</view>
				</view>

				<view class="fd-row ai-center mt-24">
					<text class="color-fe0b0b f1 fw-600">
						<text class="fs-28">￥</text>
						<text class="fs-48">
							{{
								commodityInfo.price
									? Number(commodityInfo.price).toFixed(2)
									: "0.00"
							}}
						</text>
					</text>

					<view
						class="br-circle width-48 height-48"
						:style="{
							display: `flex`,
							alignItems: `center`,
							justifyContent: `center`,
							backgroundImage: `linear-gradient(-22deg, #f4a754, #f45455)`,
						}"
						hover-class="tap-hover"
						hover-stay-time="100"
						@click="addShoppingCart"
					>
						<uni-icons type="plusempty" color="#fff" size="18" />
					</view>
				</view>
			</view>
		</view>

		<text
			:style="{ padding: `30rpx`, margin: `30rpx 20rpx`, lineHeight: 1.5 }"
			class="bgc-fff br-20 fs-28 color-333"
		>
			{{ commodityInfo.des || "--" }}
		</text>

		<shopping-cart :bottom="shoppingCartBottom" />

		<uni-popup ref="poster" :maskClick="false">
			<view class="ai-center">
				<image
					class="br-20"
					:style="{ width: `510rpx`, height: `730rpx` }"
					:src="posterUrl"
					mode="aspectFit"
					:show-menu-by-longpress="true"
				/>

				<uni-icons type="close" size="36" color="#fff" class="mt-48" @click="closePoster" />
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import shoppingCart from "@/components/shoppingCart.vue";
	import { transformURL, Storage, transformQueryString } from "@/static/libs/utils";

	const { screenHeight, safeArea }: UniApp.GetSystemInfoResult = uni.getSystemInfoSync();

	@Component({ components: { shoppingCart } })
	export default class CommodityInfo extends Vue {
		// component property
		commodityInfo: AnyObject = {};
		sumPrice: number = 0;
		shoppingCartBottom: number = screenHeight - safeArea.bottom;
		pid: number;
		posterUrl: string = "";

		async onLoad({ id, pid, scene }: AnyObject) {
			uni.showLoading({ title: "Loading..." });

			if (scene) {
				const params = <AnyObject>transformQueryString(decodeURIComponent(scene));
				id = params.id;
				pid = params.id;
			}
			this.$store.dispatch("getShoppingCartData");
			this.$request.get("/shop/productDetail", { id }).then(({ data }) => {
				this.commodityInfo = data;
				this.posterUrl = decodeURIComponent(
					transformURL(`${this.$config.API_URL}/shop/poster`, {
						id: data.id,
						token: Storage.get("authorizationInfo")?.token,
						// #ifdef MP-WEIXIN
						...uni.getAccountInfoSync().miniProgram,
						// #endif
					})
				);
				uni.hideLoading();
			});

			if (!Storage.get("authorizationInfo")?.nickName) {
				const [showFail]: any = await uni.showModal({
					title: "授权用户信息",
					content: "授权后以提供更好的体验",
					showCancel: false,
					confirmText: "授权",
					confirmColor: "#1aad19",
				});
				if (showFail) return;
				const [getFail, getRes]: any = await (<AnyObject>uni).getUserProfile({
					desc: "绑定推荐关系",
				});
				if (getFail) return;
				await this.$request.get("/user/upMsg", getRes.userInfo);
				Storage.set("authorizationInfo", getRes.userInfo);
			}

			pid && this.$request.get("/shop/bind", { pid });
		}
		onShareAppMessage() {
			const { name: title, id, user_id } = this.commodityInfo;

			return {
				title,
				path: `/pages/client/CommodityInfo?id=${id}&pid=${user_id}`,
			};
		}
		openPoster() {
			(<AnyObject>this.$refs.poster).open();
		}
		closePoster() {
			(<AnyObject>this.$refs.poster).close();
		}
		addShoppingCart() {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request
				.get("/shop/addCart", { id: this.commodityInfo.id, num: 1 })
				.then(({ msg: title }) => {
					this.$store.dispatch("getShoppingCartData");
					uni.showToast({ title });
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.reduce::before {
		content: "";
		width: 26rpx;
		height: 4rpx;
		border-radius: 4px;
		background-color: #f45455;
	}
</style>